<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/static/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/static/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/static/css/record.css" media="all">
</head>
<body>
<div class="layui-fluid">
    <fieldset class="layui-elem-field">
        <legend>财务报表</legend>
        <div class="layui-field-box">
            <div class="layui-row layui-col-space15">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header" style="padding: 15px;">
                            <div class="layui-form-item">
                                <label class="layui-form-label">搜索时间</label>
                                <div class="layui-input-block">
                                    <button class="layui-btn {if condition='$status eq 0'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="0">全部
                                    </button>

                                    <button class="layui-btn {if condition='$status eq 1'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="1">今天
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 2'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="2">本周
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 3'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="3">本月
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 4'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm status"
                                            data-status="4">本年
                                    </button>
                                    <button class="layui-btn {if condition='$status eq 5'}layui-btn-normal{else/}layui-btn-primary{/if} layui-btn-sm" id="custom">自定义
                                    </button>
                                    <div class="layui-btn {if condition='$status eq 5'}layui-btn-disabled{else/}layui-btn-primary layui-hide{/if} layui-btn-sm" id="test">
                                        {$dateTime}
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-card-body" style="padding: 0;">
                            <div class="layui-row">
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                                    <div class="info-content reb-bg">
                                        <div class="layui-col-md4">
                                            <i class="layui-icon layui-icon-chart info-chart"></i>
                                        </div>
                                        <div class="layui-col-md8 info-text">
                                            <span>总营业额</span>
                                            <h2>¥ {$count.whole}</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs6 layui-col-sm6 layui-col-md3">
                                    <div class="info-content lazur-bg">
                                        <div class="layui-col-md4">
                                            <i class="layui-icon layui-icon-chart info-chart"></i>
                                        </div>
                                        <div class="layui-col-md8 info-text">
                                            <span>总支出</span>
                                            <h2>¥ {$count.expend}</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs4 layui-col-sm12 layui-col-md3">
                                    <div class="info-content lazur-bg">
                                        <div class="layui-col-md4">
                                            <i class="layui-icon layui-icon-chart info-chart"></i>
                                        </div>
                                        <div class="layui-col-md8 info-text">
                                            <span>总盈利</span>
                                            <h2>¥ {$count.whole - $count.expend}</h2>
                                        </div>
                                    </div>
                                </div>
                                <div class="layui-col-xs4 layui-col-sm7 layui-col-md3">
                                    <div class="info-content yellow-bg">
                                        <div class="layui-col-md4">
                                            <i class="layui-icon layui-icon-chart info-chart"></i>
                                        </div>
                                        <div class="layui-col-md8 info-text">
                                            <span>新增消费</span>
                                            <h2>¥ {$toDay}</h2>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">主要数据统计</div>
                        <div class="layui-card-body" pad15>
                            <div id="main" style="width: 100%;height: 400px;"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-collapse" style="background: #fff;">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title" style="background: #fff;">营收详情</h2>
                            <div class="layui-colla-content layui-show">
                                <div id="main3" style="width: 100%;height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md6">
                    <div class="layui-collapse" style="background: #fff;">
                        <div class="layui-colla-item">
                            <h2 class="layui-colla-title" style="background: #fff;">支出详情</h2>
                            <div class="layui-colla-content layui-show">
                                <div id="main2" style="width: 100%;height: 300px;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </fieldset>
</div>
<script type="text/javascript" src="/static/layuiadmin/layui/layui.js"></script>
<script src="/static/js/echarts.js"></script>
<!-- 引入 walden 主题 -->
<script src="/static/theme/walden.js"></script>
<script>
    layui.config({
        version: true,
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'element'], function () {
        var $ = layui.jquery,
                element = layui.element;

        $('#custom').on('click', function(e){ //假设 test1 是一个按钮
            $("#test").removeClass('layui-hide');//外部事件调用
            laydate.render({
                elem: '#test'
                ,show: true //直接显示
                ,range: true
                ,closeStop: '#custom' //这里代表的意思是：点击 test1 所在元素阻止关闭事件冒泡。如果不设定，则无法弹出控件
                ,done: function(value){
                    window.location.href = '/admin/Record/report_forms/status/5/dateTime/' + value;
                }
            });
        });

        //条件
        $(".status").click(function () {
            var status = $(this).data('status');
            window.location.href = '/admin/Record/report_forms/status/' + status;
        });

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'walden');
        var myChart2 = echarts.init(document.getElementById('main2'), 'walden');
        var myChart3 = echarts.init(document.getElementById('main3'), 'walden');
        var data = '{$data}';
        data = JSON.parse(data);
        var dateList = []; //时间
        var whole = []; //总营业额
        var expend = []; //总支出
        var profit = []; //总盈利
        for (var i in data) {
            dateList.push(i);
            whole.push(data[i].whole);
            expend.push(data[i].expend);
            profit.push(data[i].profit);
        }
        var option = {
            title: {
                text: '数据统计'
            },
            legend: {
                data: ['营业额', '支出', '盈利']
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                data: dateList
            },
            yAxis: {},
            series: [{
                name: '营业额',
                type: 'line',
                data: whole
            },{
                name: '支出',
                type: 'line',
                data: expend
            },{
                name: '盈利',
                type: 'line',
                data: profit
            }]
        };

        var data2 = [{'name': '提现支出', 'value': '{$count.cash}'},{'name': '返佣支出', 'value': '{$count.gold}'}];
        var option2 = {
            tooltip : {
                trigger: 'item',
                formatter: "{b} : {c}元 ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 10,
                top: 20,
                bottom: 20,
                data: ['提现支出', '返佣支出'],
                selected: ['提现支出', '返佣支出']
            },
            series : [
                {
                    type: 'pie',
                    radius: ['55%', '70%'],
                    data: data2,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        var option3 = {
            dataset: {
                source: [
                    ['score', 'amount', 'product'],
                    [100, '{$count.turnover}', '订单'],
                    [100, '{$count.recharge}', '充值']
                ]
            },
            grid: {containLabel: true},
            xAxis: {name: '金额'},
            yAxis: {type: 'category'},
            tooltip : {
                trigger: 'item'
            },
            series: [
                {
                    type: 'bar',
                    encode: {
                        // Map the "amount" column to X axis.
                        x: 'amount',
                        // Map the "product" column to Y axis
                        y: 'product'
                    }
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        myChart2.setOption(option2);
        myChart3.setOption(option3);
    });
</script>
</body>
</html>